<!--导航栏-->
<template>
  <a-menu
    :mode="navLayout"
    :theme="navTheme"
    :selectedKeys="[activeMenu]"
    :default-open-keys="openKeys">
    <template v-for="item in asyncRoutes">
      <!-- 一级导航 -->
      <a-menu-item :key="item.children[0].name" v-if="hasOneShowingChild(item.children)" @click="handleMenu(item.children[0].name)">
        <icon-font :type="item.children[0].meta.icon" :style="{ color: item.children[0].meta.iconColor }" />
        <span>{{ item.children[0].meta.title }}</span>
      </a-menu-item>
      <!-- 有子级的导航 -->
      <sub-menu v-else :key="item.name" :menu-info="item"></sub-menu>
    </template>
  </a-menu>
</template>

<script>
import { asyncRoutes } from '@/router'
import { mapState } from 'vuex'
import SubMenu from './menu'
export default {
  name: '',
  components: {
    SubMenu
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      asyncRoutes
    }
  },
  computed: {
    activeMenu () { // 默认选中菜单项key值
      const route = this.$route
      const { name } = route
      return name
    },
    openKeys () { // 默认展开父节点SubMenu菜单项key值
      const route = this.$route
      const openKeys = []
      route.matched.forEach(item => {
        if (item.name) {
          openKeys.push(item.name)
        }
      })
      return openKeys
    },
    ...mapState({
      navTheme: state => state.app.theme,
      navLayout: state => state.app.layout
    })
  },
  created () {},
  mounted () {},
  methods: {
    // 判断有无子级
    hasOneShowingChild (val) {
      if (val.length === 1 && val[0].meta.hidden) {
        return true
      }
      return false
    },
    // 导航路由跳转
    handleMenu (name) {
      this.$router.push({ name: name })
    }
  }
}
</script>
<style lang="less" scoped>
.ant-menu.ant-menu-horizontal {
  max-width: calc(100vw - 190px - 238px - 25px);
  flex: 1 1 calc(100vw - 190px - 238px - 25px);
  line-height: 55px;
}
</style>
